<template>
	<view class="ys">
		<view class="userinfo">
			<view class="top" v-if="is_login">
				<image :src="avatar || '/static/0.png'" mode="aspectFill"></image>
				<view class="info">
					<view class="name">
						{{username || '微信用户'}}
						<image src="/static/img/man.png" v-if="info.gender == 0" mode="widthFix"></image>
						<image src="/static/img/man.png" v-else-if="info.gender ==1" mode="widthFix"></image>
						<text class="age" v-else>未知</text>
					</view>
					<view class="tips">
						{{type[usertype]}}
					</view>
					<view class="phone">
						{{info.mobile || ''}}
					</view>
				</view>
			</view>
			<button class="top" v-else @click="toPage('/pages/login/index')">
				<image src="/static/0.png" mode=""></image>
				<view class="info">
					<view class="name">
						注册 / 登录
					</view>
					<view class="phone">
						登录后即可体验更多服务
					</view>
				</view>
			</button>
			<view class="userview">
				<view class="viewitem" @click="toPages('/pages/tenant/history')">
					<view class="num">
						0
					</view>
					<view class="text">
						浏览历史
					</view>
				</view>
				<view class="viewitem" @click="toPages('/pages/tenant/collection')">
					<view class="num">
						0
					</view>
					<view class="text">
						收藏关注
					</view>
				</view>
			</view>
		</view>
		<view class="used">
			<view class="title">
				更多服务
			</view>
			<view class="ylist">
				<view class="yitem" v-for="(item,index) in usedList" :key="index" @click="toPages(item.url)">
					<view class="imgbox">
						<i class="iconfont" :class="item.icon"></i>
					</view>
					<view class="text">
						{{item.text}}
					</view>
				</view>
				<view class="yitem" @click="outLogin">
					<view class="imgbox">
						<i class="iconfont icon-kumen-kai"></i>
					</view>
					<view class="text">
						退出登录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loginUser
	} from "@/api/api.js"
	export default {
		data() {
			return {
				usedList: [{
						icon: 'icon-liuyan',
						text: '我的留言',
						url: '/pages/feedback/list'
					},
					{
						icon: 'icon-guketiaochawenjuanbiao',
						text: '报警记录',
						url: '/pages/tenant/policelist'
					},
					{
						icon: 'icon-hetong',
						text: '账号与安全',
						url: '/pages/tenant/setting'
					}
				],
				is_login: false,
				type: {
					1: '租户',
					2: '房东',
					3: '专管员'
				},
				info: [],
			}
		},
		props: ['usertype', 'avatar', 'username'],
		mounted() {
			this.loginUser()
		},
		methods: {
			outLogin() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确认退出登录?',
					success(res) {
						if (res.confirm) {
							uni.removeStorageSync('token')
							that.info = []
							that.loginUser()
							that.is_login = false
						}
					}
				})
			},
			loginUser() {
				loginUser().then(res => {
					if (res.code == 200) {
						this.is_login = true
						this.info = res.data
						this.avatar = res.data.avatar
					}
				})
			},
			toPages(url) {
				if (!this.is_login) {
					return uni.$showMsg('请先登录')
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: linear-gradient(to bottom, #ff94664d, #f2f2f2 35%) no-repeat;
	}

	.used {
		background: #fff;
		width: 96%;
		margin: 0 auto;
		border-radius: 8px;
		padding: 20px;
		box-sizing: border-box;
		margin-top: 25px;
		box-shadow: 0 0 5px #ccc;

		.title {
			font-weight: bold;
		}

		.ylist {
			display: flex;
			margin-top: 15px;

			.yitem {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 13px;

				.imgbox {
					width: 45px;
					height: 45px;
					text-align: center;
					line-height: 45px;
					background: #ff946610;
					border-radius: 50%;
					margin-bottom: 5px;

					i {
						font-size: 25px;
						color: #ff9466;
					}
				}
			}
		}
	}

	.userinfo {
		background: #fff;
		width: 96%;
		margin: 0 auto;
		border-radius: 8px;
		padding: 20px;
		box-sizing: border-box;
		margin-top: 10px;
		box-shadow: 0 0 5px #FD845080;

		.top {
			display: flex;
			align-items: center;
			background: transparent;
			text-align: left;
			line-height: 25px;
			padding: 0;

			&::after {
				border: 0;
			}

			image {
				width: 65px;
				height: 65px;
				border-radius: 50%;
				margin-right: 15px;
			}

			.info {
				.name {
					font-weight: bold;
					font-size: 17px;

					text {
						margin-left: 10px;
						background: #ff9466;
						padding: 1px 4px;
						color: #fff;
						border-radius: 4px;
						font-size: 12px;
						font-weight: normal;
					}

					image {
						width: 20px;
						margin-left: 5px;
						vertical-align: middle;
					}
				}

				.tips {
					font-size: 13px;
					color: #777;
				}

				.phone {
					font-size: 13px;
					color: #777;
				}
			}
		}

		.userview {
			display: flex;
			justify-content: space-around;
			margin-top: 20px;

			.viewitem {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				color: #777;

				.num {
					font-weight: bold;
					margin-bottom: 5px;
					font-size: 17px;
					color: #000;
				}
			}
		}
	}
</style>